<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3常见比例尺</title>
  <script src="./d3.min.js"></script>
</head>

<body>
  <script>
    // 比例尺： 线性  +  序数
    // 01 scaleLinear
    let scale = d3.scaleLinear()
    //   .domain([1, 5])
    //   .range([1, 100])
    // console.log(scale(1))
    // console.log(scale(4))
    // console.log(scale(5))
    // scale.clamp(true)
    // console.log(scale(-1))
    // console.log(scale(10))

    // 02 scaleBand
    scale = d3.scaleBand()
      .domain([1, 2, 3, 4])
      .range([0, 100])
    // console.log(scale(1))
    // console.log(scale(2))
    // console.log(scale(3))
    // console.log(scale(4))
    // console.log(scale(0))
    // console.log(scale(10))

    // 03 scaleOrdinal
    scale = d3.scaleOrdinal()
      .domain(['lg', 'syy', 'zce'])
      .range([18, 22, 40, 50])
    // console.log(scale('lg'))
    // console.log(scale('syy'))
    // console.log(scale('zce'))
    // console.log(scale('abc'))
    // console.log(scale('abcde'))

    // 04 scaleQuantize
    scale = d3.scaleQuantize().domain([0, 10]).range(['xl', 'm', 's'])
    console.log(scale(3.4))
    console.log(scale(4))
    console.log(scale(6.7))
    console.log(scale(-10))
    console.log(scale(30))

  </script>
</body>

</html>